/*
 * @Descripttion:
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-09-01 14:01:17
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-03-18 13:36:39
 */
import Vue from 'vue'
const v = new Vue()
import echarts from 'echarts'
// import '../../../../static/js/echarts/echarts.js'
import man from '@/assets/red.png'
import dot from '@/assets/dot.png'
import '../../../../node_modules/echarts/map/js/province/anhui'

/**
 * @description:工资实时数据
 */
export const drawFemaleRatio = (id, dataList, dataListNotEmpProMonth) => {
  let sexChart = echarts.init(document.getElementById(id))
  const oprions = {
    title: [
      {
        text: '专户覆盖率',
        left: '25%',
        top: '45%',
        textAlign: 'center',
        textStyle: { color: '#fff', fontWeight: 400, fontSize: '16' },
      },
      {
        text: '合同签订率',
        left: '75%',
        top: '45%',
        textAlign: 'center',
        textStyle: { color: '#fff', fontWeight: 400, fontSize: '16' },
      },
      {
        text: '本月实名制',
        left: '25%',
        top: '92%',
        textAlign: 'center',
        textStyle: { color: '#fff', fontWeight: 400, fontSize: '16' },
      },
      {
        text: '本月工资发放',
        left: '75%',
        top: '92%',
        textAlign: 'center',
        textStyle: { color: '#fff', fontWeight: 400, fontSize: '16' },
      },
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)',
    },
    color: ['#4989fc', '#53ffac'],
    series: [
      {
        name: '专户覆盖率',

        type: 'pie',
        radius: ['25%', '30%'],
        center: ['25%', '25%'],
        data: [
          { value: dataList.notAccountNum, name: '未覆盖' },
          { value: dataList.accountNum, name: '已覆盖' },
        ],
        label: {
          position: 'center',
          formatter: (params) => {
            if (params.name == '已覆盖') {
              return `${params.value}个/${params.percent}%`
            } else {
              return ''
            }
          },
        },
      },
      {
        name: '合同签订率',
        type: 'pie',
        radius: ['25%', '30%'],
        center: ['75%', '25%'],
        data: [
          { value: dataList.notContractNum, name: '未签订' },
          { value: dataList.contractNum, name: '已签订' },
        ],
        label: {
          position: 'center',
          formatter: (params) => {
            if (params.name == '已签订') {
              return `${params.value}个/${params.percent}%`
            } else {
              return ''
            }
          },
        },
      },
      {
        name: '本月实名制',
        type: 'pie',
        radius: ['25%', '30%'],
        center: ['25%', '73%'],
        data: [
          { value: dataList.empProNumMonth, name: '已实名项目数' },
          { value: dataListNotEmpProMonth, name: '未实名项目数' },
        ],
        label: {
          position: 'center',
          formatter: (params) => {
            if (params.name == '已实名项目数') {
              return `${params.value}个/${params.percent}%`
            } else {
              return ''
            }
          },
        },
      },
      {
        name: '本月工资发放',
        type: 'pie',
        radius: ['25%', '30%'],
        center: ['75%', '73%'],
        data: [
          { value: dataList.salaryNumMonth, name: '已发放' },
          { value: dataList.notSalaryMonth, name: '未发放' },
        ],
        label: {
          position: 'center',
          formatter: (params) => {
            if (params.name == '已发放') {
              return `${params.value}个/${params.percent}%`
            } else {
              return ''
            }
          },
        },
      },
    ],
  }
  sexChart.setOption(oprions, 'true')
  window.addEventListener('resize', () => {
    sexChart.resize()
  })
}

/**
 * @description:实名制统计
 */
export const drawMap = (id, name, data) => {
  const optionMap = {
    roamController: {
      show: true,
      x: 'right',
      mapTypeControl: {
        china: true,
      },
    },
    geo: {
      map: name, //上面引入
      show: true,
      itemStyle: {
        areaColor: 'transparent',
      },
    },
    series: [
      {
        type: 'map',
        map: name,
        roam: false,
        label: {
          normal: {
            show: true,
            position: 'centerTop',
            // backgroundColor: '#3e7dee',
            height: 20,
            padding: 3,
            rich: {
              img1: {
                backgroundColor: {
                  image: man,
                },
                height: 15,
                width: 15,
                position: 'absolute',
                left: 15,
              },
              img2: {
                backgroundColor: {
                  image: dot,
                },
                align: 'center',
                height: 12,
                width: 20,
                top: 10,
              },
              c: {
                color: '#53FFAC',
              },
              d: {
                color: '#fff',
                textBorderColor: '#000',
                textBorderWidth: 1,
                fontSize: 10,
                lineHeight: 24,
                width: 50,
                height: 24,
                marginTop: 20,
                align: 'center',
              },
            },
            formatter: '{d|{b}}\n{c|{c}}',
            textStyle: {
              color: '#ccc',
              fontSize: '10',
            },
          },
        },
        itemStyle: {
          normal: {
            color: 'transparent',
            borderColor: '#3e91be',
            areaColor: 'transparent',
            areaStyle: { areaColor: 'transparent' },
            textStyle: {
              color: 'red', //省份字体颜色
            },
          },
        },
        data: data,
      },
    ],
  }

  var hosts = window.location.host
  var protocol = document.location.protocol
  let host
  if (hosts.indexOf('localhost') != -1) {
    host = protocol + '//' + hosts + '/static/'
  } else {
    host = window.location.pathname + 'static/'
  }
  let url = ''
  if (name.length == 2) {
    url = `js/json/geometryProvince/${name}.json`
  } else if (name.length == 6) {
    url = `js/json/geometryCouties/${name}.json`
  } else if (name.length == 4) {
    url = `js/json/geometryCouties/${name}00.json`
  } else {
    url = `js/json/china.json`
  }
  v.axios.get(host + url).then((res) => {
    if (res) {
      echarts.registerMap(name, res.data)
      let mapChart = echarts.init(document.getElementById(id))
      mapChart.setOption(optionMap, true)
      window.addEventListener('resize', () => {
        mapChart.resize()
      })
    }
  })
}
/**
 * @description:保证金数据
 */
export const drawLineArea = (id, type, dataList) => {
  let doubleBarChart = echarts.init(document.getElementById(id))
  doubleBarChart.setOption({
    color: ['#6defff', '#ff78f5'],
    toolbox: { show: false },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      data: ['次数', '金额'],
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        scale: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        data: dataList.nameArray,
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        name: '次数',
        nameLocation: 'end',
        nameGap: 22,
        nameTextStyle: {
          align: 'center',
          fontSize: 10,
          padding: [0, 40, 0, 0],
        },
      },
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        name: '金额（万元）',
        nameLocation: 'end',
        nameGap: 22,
        nameTextStyle: {
          align: 'left',
          fontSize: 10,
          padding: [0, 40, 0, 0],
        },
      },
    ],
    series: [
      {
        name: '次数',
        type: 'bar',
        yAxisIndex: 0,
        barWidth: 15, //柱图宽度
        data: dataList.firstNumArray,
      },
      {
        name: '金额',
        type: 'line',
        symbol: 'circle',
        yAxisIndex: 1,
        smooth: type == 1 ? true : false,
        label: {
          show: true,
          position: 'inside',
          color: '#ff78f5',
          formatter: (params) => {
            return `${params.value}`
          },
        },
        areaStyle: {
          normal: {
            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255,120,245,0.8)',
              },
              {
                offset: 0.34,
                color: 'rgba(255,120,245,0.45)',
              },
              {
                offset: 1,
                color: 'rgba(255,120,245,0.20)',
              },
            ]),
          },
        },
        data: dataList.thirdNumArray,
      },
    ],
  })
  window.addEventListener('resize', () => {
    doubleBarChart.resize()
  })
}
/**
 * @description:预警中心
 */
export const drawTipCenter = (id, dataList) => {
  let doubleBarChart = echarts.init(document.getElementById(id))
  doubleBarChart.setOption({
    color: ['#53ffac', '#4989fc'],
    toolbox: { show: false },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        height: 14,
        start: 0,
        end: 30,
        xAxisIndex: [0],
        textStyle: {
          color: '#fff',
          fontSize: '10',
        },
      },
    ],
    legend: {
      data: ['处理中', '未处理'],
      right: 20,
      top: 8,
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '12%',
      containLabel: true,
    },
    xAxis: [
      {
        scale: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
            width: 0.5,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        data: dataList.nameArray,
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        nameLocation: 'end',
        nameGap: 22,
        nameTextStyle: {
          align: 'center',
          fontSize: 10,
          padding: [0, 40, 0, 0],
        },
      },
    ],
    series: [
      {
        name: '处理中',
        type: 'bar',
        stack: '已开户',
        barWidth: 20, //柱图宽度
        data: dataList.secondNumArray,
      },
      {
        name: '未处理',
        type: 'bar',
        stack: '已开户',
        barWidth: 20, //柱图宽度
        label: {
          show: true,
          position: 'top',
          color: '#E3F00D',
          formatter: (params) => {
            return `${params.value}`
          },
        },
        data: dataList.firstNumArray,
      },
    ],
  })
  window.addEventListener('resize', () => {
    doubleBarChart.resize()
  })
}

/**
 * @description:诚信管理
 */
export const drawIntegrityManagement = (id, arrlevel, arrtotal) => {
  let doubleBarChart = echarts.init(document.getElementById(id))
  doubleBarChart.setOption({
    color: ['#53ffac'],
    toolbox: { show: false },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        height: 14,
        start: 0,
        end: 30,
        xAxisIndex: [0],
        textStyle: {
          color: '#fff',
          fontSize: '10',
        },
      },
    ],
    xAxis: [
      {
        scale: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        data: arrlevel,
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        nameLocation: 'end',
        nameGap: 22,
        nameTextStyle: {
          align: 'center',
          fontSize: 10,
          padding: [0, 40, 0, 0],
        },
      },
    ],
    series: [
      {
        name: '项目数',
        type: 'bar',
        stack: '已开户',
        barWidth: 20, //柱图宽度
        data: arrtotal,
        label: {
          show: true,
          position: 'top',
          color: '#E3F00D',
          formatter: (params) => {
            return `${params.value}`
          },
        },
      },
    ],
  })
  window.addEventListener('resize', () => {
    doubleBarChart.resize()
  })
}
